<template>
  <div class="app-container">
    <el-card v-loading="loading">
      <div slot="header">
        <el-button type="primary" @click="resetForm()">返回</el-button>
      </div>
      <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="导入的文件类型" prop="">
        <el-select clearable v-model="formData.importType" filterable placeholder="导入的文件类型" @change="changeImportType">
          <el-option v-for="item in importTypes" :key="item.code" :label="item.name" :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>


        <el-form-item label="导入的文件" prop="fileName">
          <el-upload   style="margin: 0 10px;" :action="importUrl+'import/uploadExcel'"
                       :on-success="uploadSuccessHandler"
                       :on-error="uploadFailHandler"
                       :before-upload="beforeUpload"
                       :file-list="fileList"
                       multiple
                       name="excel" :show-file-list="true" :headers="headers">
            <el-button  type="primary" icon="el-icon-download">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传文件</div>
          </el-upload>

        </el-form-item>
        <el-form-item>
          <el-button  type="primary" icon="el-icon-download" @click="downloadTemplate">下载导入模板</el-button>
        </el-form-item>




        <el-form-item>
          <el-button @click="resetForm">关闭</el-button>
          <el-button :loading="isAdd" type="primary" @click="submitForm('ruleForm')">
            <span v-if="isAdd">提交中...</span>
            <span v-else>提交</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import { allImportType,applyImport,downloadTemplateByType } from '@/api/importApply.js'
  let $this = null
  export default {
    name: 'submitForm',
    props: {
      subData: {
        type: Object,
        default: {}
      }
    },
    data () {
      return {
        isAdd: false,
        loading: false,
        formData: {
          importType:'',
          fileName:'',
          originFileName:''
        },
        importName:'',
        rules: {},
        importTypes:[],
        fileList:[],
        isDown: false,
        headers: {
          apiKey: window.sessionStorage.getItem('token')
        },
        importUrl:this.importUrl,
      }
    },
    created () {
      $this = this
      // if ($this.subData.btnId == 1) {
      //   $this.supplierDetail()
      // }
      allImportType().then(res => {
        this.importTypes = res.data.data && res.data.data
      })
    },
    methods: {
      downloadFile (res, name) {
        const blob = new Blob([res.data])
        const fileName = name + '.xlsx'
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      },
      changeImportType(e){
        $this.importName=$this.importTypes[e].name
      },
      downloadTemplate () {
        $this.isDown = true
        const ttt={
          type:$this.formData.importType
        }
        downloadTemplateByType(ttt).then(res => {
          $this.isDown = false
          $this.downloadFile(res, $this.importName+'模板')
        }).catch(err => {
          $this.isDown = false
          return $this.$message.error('导出文件错误')
        })
      },
      beforeUpload(file) {
        this.$loading({
          lock: true,
          text: '正在导入...',
          spinner: 'el-icon-loading',
        })
      },
      // 导入成功触发
      uploadSuccessHandler (response, file, fileList) {
        this.$loading().close()
        if (response.success) {
          $this.$message({
            type: 'success',
            message: response.message,
            showClose: true
          })
          $this.formData.fileName=response.data.fileName
          $this.formData.originFileName=response.data.originFileName
          $this.fileList=[]
          $this.fileList.push({name:response.data.originFileName,url:''})
          // this.getPageProcurement()
        } else {
          $this.$message({
            type: 'error',
            message: response.message,
            showClose: true
          })
          $this.fileList=[]
        }
      },
      uploadFailHandler () {
        this.$loading().close()
        $this.$message.error('上传失败')
      },
      // supplierDetail () {
      //   $this.loading = true
      //   dictDetail($this.subData.id).then(res => {
      //     $this.loading = false
      //     $this.formData = res.data.data
      //   }).catch(err => { $this.loading = false })
      // },
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (!valid) {
            return $this.$message.error('请完善表单信息')
          }
          if ($this.subData.btnId == 0) {
            $this.isAdd = true
            applyImport($this.formData).then(res => {
              $this.isAdd = false
              if (res.data.code == 500) {
                return $this.$message.error(res.data.message)
              }
              $this.$emit('refresh')
            }).catch(err => { $this.isAdd = false })
          }
          // if ($this.subData.btnId == 1) {
          //   $this.isAdd = true
          //   updateDict($this.formData).then(res => {
          //     $this.isAdd = false
          //     if (res.data.code == 500) {
          //       return $this.$message.error(res.data.message)
          //     }
          //     $this.$emit('refresh')
          //   }).catch(err => { $this.isAdd = false })
          // }
        })
      },
      resetForm () {
        $this.$emit('closeView')
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-input {
    width: 500px;
  }
</style>
